<template>
  <div class="shouhuodizhi">
    <ul>
      <li v-for="item in list" :key="item.addressid">
        <div class="left">
          <p class="ziliao">
            <span class="name">{{ item.name }}</span>
            <span class="dianhua">{{ item.tel }}</span>
            <span class="moren" v-if="item.isDefault">默认</span>
            <!-- <span class="jia">家</span> -->
          </p>
          <p class="dizhi">{{ item.province + item.addressDetail }}</p>
        </div>
        <div class="right">
          <div @click="xiugaidizhi(item)">
            <svg
              t="1667216399469"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="6675"
              width="16"
              height="16"
            >
              <path
                d="M684.202667 117.248c15.893333-15.872 42.154667-15.36 58.922666 1.408l90.517334 90.517333c16.661333 16.661333 17.344 42.986667 1.429333 58.922667l-445.653333 445.653333c-7.936 7.914667-23.104 16.746667-34.218667 19.776l-143.701333 39.253334c-21.909333 5.994667-35.114667-7.104-29.568-28.949334l37.248-146.773333c2.773333-10.944 11.562667-26.346667 19.392-34.176l445.653333-445.653333zM268.736 593.066667c-2.901333 2.901333-8.106667 12.074667-9.130667 16.021333l-29.12 114.773333 111.957334-30.570666c4.437333-1.216 13.632-6.549333 16.810666-9.728l445.653334-445.653334-90.517334-90.496-445.653333 445.653334zM682.794667 178.986667l90.517333 90.517333-30.186667 30.186667-90.496-90.517334 30.165334-30.165333z m-362.026667 362.048l90.496 90.517333-30.165333 30.165333-90.517334-90.496 30.165334-30.186666zM170.666667 874.666667c0-11.776 9.429333-21.333333 21.461333-21.333334h661.077333a21.333333 21.333333 0 1 1 0 42.666667H192.128A21.333333 21.333333 0 0 1 170.666667 874.666667z"
                fill="#3D3D3D"
                p-id="6676"
              ></path>
            </svg>
          </div>
          <div @click="remove(item.addressid)">
            <svg
              t="1667216419323"
              class="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="7716"
              width="16"
              height="16"
            >
              <path
                d="M96 320a32 32 0 1 1 0-64h832a32 32 0 0 1 0 64H96z m736 0h64v448a160 160 0 0 1-160 160H288a160 160 0 0 1-160-160V320h64v96H128v-96h64v448a96 96 0 0 0 96 96h448a96 96 0 0 0 96-96V320z m-512 112a32 32 0 0 1 64 0v320a32 32 0 0 1-64 0v-320z m320 0a32 32 0 0 1 64 0v320a32 32 0 0 1-64 0v-320zM288 256H224V192a96 96 0 0 1 96-96h384a96 96 0 0 1 96 96v64h-64V224h64v32h-64V192a32 32 0 0 0-32-32H320a32 32 0 0 0-32 32v64z"
                p-id="7717"
              ></path>
            </svg>
          </div>
        </div>
      </li>
    </ul>
    <button @click="tiao">+新增收货地址</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      list: null,
    };
  },
  mounted() {
    this.$emit("fanhui", 5);
    this.getlist();
  },
  methods: {
    tiao() {
      this.$router.push({ name: "addshouhuodizhi" });
    },
    //获取地址列表
    getlist() {
      let params = {
        token: sessionStorage.getItem("token"),
        userid: sessionStorage.getItem("userid"),
      };
      axios
        .get(`http://121.89.205.189:3000/api/address/list`, {
          params: {
            userid: sessionStorage.getItem("userid"),
          },
          headers: {
            token: sessionStorage.getItem("token"),
          },
        })
        .then((res) => {
          this.list = res.data.data;
        });
    },
    //删除地址
    remove(addressid) {
      axios
        .post("http://121.89.205.189:3000/api/address/delete", {
          token: sessionStorage.getItem("token"),
          addressid: addressid,
        })
        .then((res) => {
          this.getlist();
        });
    },
    //修改地址
    xiugaidizhi(addressid) {
      this.$router.push({
        name: "addshouhuodizhi",
        query: { dizhiid: addressid },
      });
    },
  },
};
</script>

<style lang="less" scoped>
.shouhuodizhi {
  display: flex;
  flex-direction: column;
  > ul {
    width: 100%;
    display: flex;
    flex-direction: column;
    > li {
      width: 100%;
      height: 1rem;
      background: white;
      display: flex;
      justify-content: space-between;
      > .left {
        display: flex;
        flex-direction: column;
        justify-content: center;

        > .ziliao {
          display: flex;
          padding: 0.1rem;
          > .name,
          .dianhua {
            font-size: 0.15rem;
            font-weight: 700;
            margin-right: 0.1rem;
          }

          > .moren {
            background: red;
            color: white;
            margin-left: 0.05rem;
            padding: 0 0.05rem;
            border-radius: 0.1rem;
          }
          > .jia {
            background: blue;
            color: white;
            margin-left: 0.05rem;
            padding: 0 0.05rem;
            border-radius: 0.05rem;
          }
        }
        > .dizhi {
          color: #999999;
          font-size: 0.1rem;
          padding: 0.1rem;
        }
      }
      .right {
        display: flex;
        justify-content: center;
        align-items: center;
        > div {
          padding: 0.1rem;
        }
      }
    }
  }
}
.wu {
  width: 100%;
  height: 2.6rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  > img {
    width: 1.6rem;
    height: 1.6rem;
    margin: auto;
  }
  > p {
    text-align: center;
    color: #999999;
  }
}
button {
  width: 3.5rem;
  height: 0.4rem;
  background: linear-gradient(90deg, #ffa100, #ef5b27);
  border: none;
  border-radius: 0.3rem;
  font-size: 13px;
  color: white;
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
}
</style>